<template>
	<view class="benefit">
		<u-toast ref="uToast"></u-toast>
		<view class="" style="width: 400rpx;" class="benefit_tab">

			<u-tabs-swiper ref="uTabs" :list="itemTabs" :current="current" @change="change" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="u-m-t-10">
			<swiper-item class="swiper-item" v-for="(item, index) in benefitData" :key="index">
				<u-grid :border="true" col="2" hover-class="hover-class" class="benefit__grid">
					<u-grid-item @click="goBenefit()">

						<text>{{item.incomeTitle}}</text>
						<text class="grid-text">{{item.incomeAmount}}</text>
					</u-grid-item>

					<u-grid-item @click="gotrade()">

						<text>{{item.tradeTitle}}</text>
						<text class="grid-text">{{item.activeCount}}</text>
					</u-grid-item>
					<u-grid-item @click="goNewMerchant()">

						<text>{{item.newMerchant}}</text>
						<text class="grid-text">{{item.activeAmount}}</text>
					</u-grid-item>
					<u-grid-item @click="goNewActive()">

						<text>{{item.newActive}}</text>
						<text class="grid-text">{{item.activeAmount}}</text>
					</u-grid-item>
				</u-grid>

			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		props: {
			channelName: String
		},
		data() {
			return {
				itemTabs: [{
					name: '今日'
				}, {
					name: '昨日'
				}, {
					name: '本月'
				}],
				current: 0,
				swiperCurrent: 0,
				benefitData: [],


			}

		},
		watch: {
			channelName(newVal, oldVal) {

				this.getBenefitData();
			}
		},
		mounted() {
			this.getBenefitData();
		},

		methods: {
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;

			},
			click(item) {
				console.log('item', item);
			},
			change(index) {
				this.swiperCurrent = index;
				console.log("index=" + index)

			},
			goBenefit() {
				this.$u.route('packageC/pages/benefit/benefitStatistic/benefitStatistic')
			},
			gotrade() {
				this.$u.route('packageB/pages/main/trade/trade-list')
			},
			goNewMerchant() {
				uni.switchTab({
					url: "/pages/benefit/benefit-home",
				});
			},
			goNewActive() {
				this.$u.route('packageB/pages/main/terminal/activeStatistic')
			},
			getBenefitData() {
				const _self = this;
				this.$zx.user_api.getHomeData().then((data) => {
					// console.log("data=" + JSON.stringify(data))
					this.$set(data.today, `incomeTitle`, "今日收益（元）");
					this.$set(data.today, `tradeTitle`, "今日交易（元）");
					this.$set(data.today, `newMerchant`, "今日新增（户）");
					this.$set(data.today, `newActive`, "今日激活（台）");
					_self.benefitData.push(data.today);
					this.$set(data.yesterday, `incomeTitle`, "昨日收益（元）");
					this.$set(data.yesterday, `tradeTitle`, "昨日交易（元）");
					this.$set(data.yesterday, `newMerchant`, "昨日新增（户）");
					this.$set(data.yesterday, `newActive`, "昨日激活（台）");
					_self.benefitData.push(data.yesterday);
					this.$set(data.week, `incomeTitle`, "本月收益（元）");
					this.$set(data.week, `tradeTitle`, "本月交易（元）");
					this.$set(data.week, `newMerchant`, "本月新增（户）");
					this.$set(data.week, `newActive`, "本月激活（台）");
					_self.benefitData.push(data.week);


					// console.log('_self' + JSON.stringify(_self.benefitData));
				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.benefit {
		background-color: white;
		height: 450rpx;
		padding: 20rpx;

		&__grid {
			// border-radius: 20rpx;
		}
	}

	.grid-text {
		font-size: 16px;
		color: red;
		// padding: 10rpx 0 20rpx 0rpx;
		font-weight: bold;
		box-sizing: border-box;

	}
</style>